// ---------------------------------------------------------------------------------------------------- 页面样式变量 ------
$page-bg-color: #f5f5f5;
// ---------------------------------------------------------------------------------------------------- 页面样式变量 ------

// ---------------------------------------------------------------------------------------------------- 盒子样式变量 ------
$box-bg-color: #fff;
$box-shadow-color: rgba(17, 17, 17, 0.15);
$box-shadow-color-hover: rgba(17, 17, 17, 0.25);
// ---------------------------------------------------------------------------------------------------- 盒子样式变量 ------


:root {

  // ----------------------------------------------------------------------------------------------------- 页面样式 ------
  .page-bg {
    background-color: $page-bg-color;
  }
  // ----------------------------------------------------------------------------------------------------- 页面样式 ------

  // ----------------------------------------------------------------------------------------------------- 盒子样式 ------
  .box-bg {
    background-color: $box-bg-color;
  }

  .box-shadow {
    box-shadow: 0 3px 15px 3px $box-shadow-color;
    transition: box-shadow 300ms ease-in-out;

    &:hover {
      box-shadow: 0 3px 15px 3px $box-shadow-color-hover;
    }
  }
  // ----------------------------------------------------------------------------------------------------- 盒子样式 ------

}
